<script setup lang="ts">
import { navigateTo, showLoading, showToast } from '@tarojs/taro';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { formState, formRules, state } from './state';
import dayjs from 'dayjs';
import { INSERT_DOSSIER_RECORD } from '/@/api/modules/archive/police/dossier-record';
import { ref } from 'vue';
import { onMounted } from 'vue';

const archiveEditFormRef = ref();
function submit() {
  archiveEditFormRef.value.validate().then(({ valid }: any) => {
    if (!valid) return;
    //开始时间 不能大于结束时间
    if (dayjs(formState.startTime).isAfter(dayjs(formState.endTime))) {
      showToast({
        title: '开始日期不能大于结束日期',
        icon: 'error',
      });
      return;
    }

    showLoading();
    //设置-当天开始-时分秒
    const beginTime = dayjs(formState.startTime)
      .hour(0)
      .minute(0)
      .second(0)
      .millisecond(0)
      .valueOf();
    //设置-当天结束-时分秒
    const endTime = dayjs(formState.endTime)
      .hour(23)
      .minute(59)
      .second(59)
      .millisecond(0)
      .valueOf();
    INSERT_DOSSIER_RECORD({
      content: {
        beginTime,
        endTime,
        description: formState.opinion,
        content: [{ dossierId: formState.archiveId, dossierName: formState.archiveName }],
      },
    }).then((res) => {
      if (res.comResp.code === 100) {
        navigateTo({
          url: '/pages/archive-borrow/submit-success/index',
        });
      }
    });
  });
}
const minDate = dayjs().subtract(8, 'year').toDate();
const maxDate = dayjs().add(8, 'year').toDate();
const currentDate = new Date();
const confirm = ({ selectedValue, selectedOptions }) => {
  console.log(selectedValue, selectedOptions);
  if (state.currentSelectedTime === 1) {
    formState.startTime = selectedValue.join('-');
  }

  if (state.currentSelectedTime === 2) {
    formState.endTime = selectedValue.join('-');
  }

  state.timePickerVisible = false;
};

onMounted(() => {
  formState.archiveId = '';
  formState.archiveName = '';
  formState.startTime = '';
  formState.endTime = '';
  formState.opinion = '';
});
/**
 * 统一定义label的宽度
 */
const label_width = '120';
</script>

<template>
  <view class="archive-borrow-edit app-page--1">
    <app-navbar title="档案借阅" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="archive-borrow-edit__wrapper">
        <nut-form
          :model-value="formState"
          :rules="formRules"
          class="archive-borrow-edit__form"
          ref="archiveEditFormRef"
        >
          <nut-form-item
            required
            prop="archiveId"
            label="借阅文档"
            :label-width="label_width"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              :model-value="formState.archiveName"
              placeholder="请选择借阅文档"
              :border="false"
              @click-input="state.appArchiveListPopupVisible = !state.appArchiveListPopupVisible"
              readonly
            >
              <template v-slot:right>
                <app-nut-icon-right />
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item
            required
            prop="startTime"
            label="借阅开始时间"
            :label-width="label_width"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              :model-value="formState.startTime"
              placeholder="请选择借阅开始时间"
              :border="false"
              readonly
              @click-input="
                () => {
                  state.timePickerVisible = !state.timePickerVisible;
                  state.currentSelectedTime = 1;
                }
              "
            >
              <template v-slot:right>
                <app-nut-icon-right />
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item
            required
            prop="endTime"
            :label-width="label_width"
            label="借阅结束时间"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              :model-value="formState.endTime"
              placeholder="请选择借阅结束时间"
              :border="false"
              readonly
              @click-input="
                () => {
                  state.timePickerVisible = !state.timePickerVisible;
                  state.currentSelectedTime = 2;
                }
              "
            >
              <template v-slot:right>
                <app-nut-icon-right />
              </template>
            </nut-input>
          </nut-form-item>
          <nut-form-item
            required
            prop="opinion"
            :label-width="label_width"
            label="借阅事由"
            label-align="left"
            error-message-align="left"
          >
            <nut-input v-model="formState.opinion" placeholder="请输入借阅事由" :border="false" />
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>
    <view class="archive-borrow-edit__footer">
      <nut-button block type="info" @click="submit">
        <text>提交</text>
      </nut-button>
    </view>
    <app-archive-list-popup
      v-model="state.appArchiveListPopupVisible"
      @on-selected="(archiveId?: string, archiveName?: string)=>{
      formState.archiveId = archiveId || '';
      formState.archiveName = archiveName || '';
    }"
    />
    <nut-popup position="bottom" v-model:visible="state.timePickerVisible">
      <nut-date-picker
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        :is-show-chinese="true"
        @cancel="state.timePickerVisible = false"
        @confirm="confirm"
      >
      </nut-date-picker>
    </nut-popup>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
